<template>
  <div class="vip">
    <!-- <h2>关系管理</h2> -->
    <Row>
      <Form ref="form"
            :label-width="100"
            inline>
        <Input v-model="searchForm.nickname"
               placeholder="请输入昵称"
               style="width:300px;margin-right:20px;margin-bottom:20px" />
        <Select v-model="searchForm.level"
                @on-change="handleLevel"
                style="width:200px;margin-right:20px;margin-bottom:20px"
                placeholder="选择级别">
          <Option v-for="item in level"
                  :value="item.level"
                  :key="item.value">{{ item.name }}</Option>
        </Select>
        <Button @click="handleSearch"
                type="primary"
                style="margin-bottom:20px">搜索</Button>
        <Button @click="handleReset"
                type="default"
                style="margin-bottom:20px;margin-left:20px">重置</Button>
      </Form>
    </Row>
    <Row>
      <Table border
             :columns="columns5"
             :data="data5"
             @on-sort-change="orderBy"></Table>
    </Row>
    <Row type="flex"
         justify="end"
         class="page"
         :data="data">
      <Page :current="searchForm.page"
            :total="total"
            :page-size="searchForm.limit"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            :page-size-opts="[10, 20, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer />
    </Row>
  </div>
</template>

<script>
import {
  vipUserList,
  relationshipList,
  relationshipLevelList
} from '@/api/mc/vip.js'

export default {
  name: '',
  data () {
    return {
      data: [],
      searchForm: {
        nickname: null, // 双向绑定搜索数据
        level: null,
        sort: { id: 'desc' }, // 自定义排序
        page: 1, // 当前页数
        limit: 10 // 页面大小
      },
      limit: null,
      level: [],
      columns5: [
        {
          title: '会员ID',
          key: 'id',
          align: 'center',
          width: '100'
        },
        {
          title: '昵称',
          key: 'nickname',
          align: 'center'
        },
        {
          title: '会员头像',
          key: 'headimgurl',
          align: 'center',
          render (h, params) {
            const { headimgurl } = params.row
            return h('img', {
              style: {
                weight: '50px',
                height: '50px'
              },
              attrs: {
                src: params.row.headimgurl
              }
            })
          }
        },
        {
          title: '微信',
          key: 'wx_no',
          align: 'center'
        },
        {
          title: '电话',
          key: 'mobile',
          align: 'center'
        },
        {
          title: 'TA上级',
          align: 'center',
          render (h, params) {
            return h('p', params.row.relevance_user.nickname)
          }
        },
        {
          title: '下级数量',
          key: 'children_num',
          sortable: 'custom',
          align: 'center'
        },
        {
          title: 'TA的佣金',
          key: 'total_commission',
          sortable: 'custom',
          align: 'center',
          render (h, params) {
            return h('p', params.row.total_commission)
          }
        }
      ],
      data5: [],
      total: 0
    }
  },
  methods: {
    orderBy (column, key, order) {
      console.log(column)
      // eslint-disable-next-line camelcase
      let can_commission = column.key
      // 赋值
      let nickname1 = this.searchForm.nickname
      let level1 = this.searchForm.level
      let limit = this.searchForm.limit
      if (column.order == 'normal') {
        this.searchForm = {
          nickname: nickname1,
          level: level1,
          // filter: { nickname: nickname1 }, // 双向绑定搜索数据
          sort: { id: 'desc' }, // 自定义排序
          page: 1,
          limit: limit
        }
      } else {
        if (column.key == 'total_commission') {
          this.searchForm = {
            nickname: nickname1,
            level: level1,
            // filter: { nickname: nickname1 }, // 双向绑定搜索数据
            sort: { total_commission: column.order }, // 自定义排序
            page: 1,
            limit: limit
          }
        } else {
          this.searchForm = {
            nickname: nickname1,
            level: level1,
            // filter: { nickname: nickname1 }, // 双向绑定搜索数据
            sort: { children_num: column.order }, // 自定义排序
            page: 1,
            limit: limit
          }
        }
      }
      console.log('this.searchForm', this.searchForm)
      // 调用list渲染
      this.data5 = []
      relationshipList(this.searchForm).then(res => {
        // console.log('res', res)
        res.data.map(v => {
          this.data5.push(v)
        })
        this.total = res.meta.pagination.total
      })
    },
    // 搜索
    handleSearch (e) {
      this.searchForm.page = 1
      // this.searchForm.limit
      if (this.searchForm.nickname && this.searchForm.level) {
        this.getVipUserList()
      } else {
        this.$Message.info('请完善查询条件')
      }
    },
    // 获取级别
    getLevelList () {
      relationshipLevelList().then(res => {
        console.log('等级', res)
        res.map(v => {
          // console.log('v', v)
          this.level.push(v)
        })
      })
    },
    // 选择级别
    handleLevel (level) {
      console.log('当前选中级别', level)
      this.searchForm.level = level
    },
    // 重置功能
    handleReset () {
      this.data5 = []
      this.searchForm = {
        nickname: null, // 双向绑定搜索数据
        level: null
      }
      this.searchForm.page = 1
      // this.searchForm.limit = this.limit
      this.total = this.data5.length
    },
    // 获取数据
    getVipUserList () {
      this.data5 = []
      relationshipList(this.searchForm)
        .then(res => {
          this.data5 = []
          console.log('初始化数据res', res)
          res.data.map(v => {
            this.data5.push(v)
          })
          this.total = res.meta.pagination.total
        })
        .catch(err => {
          console.log(err)
        })
    },

    loadData () { },
    getData () { },
    // 分页
    changePage (v) {
      this.searchForm.page = v
      this.getVipUserList()
    },
    changePageSize (v) {
      if (this.data5.length > 0) {
        this.limit = v
        this.searchForm.limit = v
        this.getVipUserList()
      } else {
        this.limit = v
        this.searchForm.limit = v
      }
    }
  },
  created () {
    this.getLevelList()
  }
}
</script>
